import React from "react";
import { hot } from 'react-hot-loader/root';
import "./App.css"

class App extends React.Component {
    state={
        aList:[
            {
                name:"常规",
            },
            {
                name:"列表",
            },
            {
                name:"会员",
            }
        ],
        atver:0,
        aaList:[
            {name:"图片水印"},
            {name:"文字水印"},
            {name:"嵌入摄像头"},
            {name:"定时录制"},
            {name:"分屏录制"},
            {name:"按键显示"},
            {name:"桌面面板"},
            {name:"本地直播"},
        ],
        aatver:0
    }
    render() {
        const { name } = this.props;
        const{aList,atver,aaList,aatver}=this.state
        let a =aList.map((item,index)=>{
            return <li key={index} className={atver==index?"atver":''}
            onClick={()=>this.setState({atver:index})}
            >{item.name}</li>
        })
        let b =aaList.map((item,index)=>{
            return <li key={index} className={aatver==index?"atver":''}
            onClick={()=>this.setState({aatver:index})}
            ><div className="img"></div>
            <p>{item.name}</p></li>
        })
        return (
            <div className="bod">
                <div className="bodHead">EV录屏</div>
                <div className="bodbody">
                    <ul className="bodbody-left">
                    {a}
                    </ul>
                    {atver==0?<><div className="bodbody-connet">
                              <div className="bodbody-connet-top">
                                  <div>本地录制</div>
                                  <div>在线直播</div>
                              </div>
                              <div className="bodbody-connet-body">
                                    <p>选择录制区域</p>
                                    <p>选择录制音频</p>
                                    <select name="" id="">
                                        <option value="">全屏录制</option>
                                        <option value="">同步录制</option>
                                        <option value="">全屏录制</option>
                                    </select>
                                    <select name="" id="">
                                        <option value="">麦和系统声音</option>
                                        <option value="">麦声音</option>
                                        <option value="">系统声音</option>
                                    </select>
                              </div>
                              <div className="bodbody-connet-bottom">
                                  <p>辅助工具</p>
                                  <ul className="bodbody-connet-bottom-a">

                                      {b}
                                  </ul>
                                 
                              </div>
                    </div>
                    <div className="bodbody-right">
                       <img src="/img/a.png" alt="" />
                    </div></>:<div></div>}
                    
                </div>
            </div>
        );
    }
}

export default hot(App);